<template>
  <div class="add_box">
    <span>数据列表</span>
  </div>
  <!-- 列表数据 -->
  <div class="table_list">
    <el-table :data="tableData.list" style="width: 100%" :border="true">
      <el-table-column prop="id" label="编号" width="130" />
      <el-table-column prop="name" label="秒杀时间段名称" width="220" />
      <el-table-column label="开始时间" width="220">
        <template #default="scope">
          <div>
            {{
              scope.row.startTime
                ? dayjs(scope.row.handleTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" width="220">
        <template #default="scope">
          <div>
            {{
              scope.row.endTime
                ? dayjs(scope.row.handleTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <!-- 自定义列模板 -->
      <el-table-column prop="productCount" label="商品数量" width="100">
        <template #default="scope"> </template>
      </el-table-column>
      <el-table-column label="操作" width="207" flex="right">
        <template #default="scope">
          <span class="spn1">商品列表</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "../../request/api";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import router from "../../router";

// 列表数据
let tableData = reactive({
  list: <any>[],
  pageNum: 1,
  pageSize: 5,
  total: 28,
  totalPage: 6,
  nickName: "",
});
// 拿取路由的参数
const route = useRoute();
console.log(route.query.flashPromotionId);
let flashPromotionId = ref("");
flashPromotionId.value = route.query.flashPromotionId;
// 获取所有商品数据的请求
let getProductList = () => {
  api.flashlist
    .FlashSessionSelectListApi({
      flashPromotionId: flashPromotionId.value,
    })
    .then((res) => {
      console.log(res);
      tableData.list = res;
    });
};
getProductList();
</script>

<style lang="scss" scoped>
.el-dialog {
  padding: 0;
  margin: 0;
  .el-id-7979-21 {
    padding: 0;
  }
  .example_basic {
    font-size: 14px;
    margin-right: 30px;
    margin-bottom: 40px;

    div {
      margin: 10px;
    }

    span {
      display: inline-block;
      //   width: 90px;
      padding: 0;
      margin: 0;
      margin-right: 10px;
    }
  }
}
.search {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;
  .search_top {
    display: flex;
    justify-content: space-between;
  }
  .el-input {
    width: 200px;
  }
  .ipt_box {
    display: flex;
    flex-wrap: wrap;
  }
}
.add_box {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
  height: 20px;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}
img {
  height: 100px;
  width: 150px;
}
.table_list {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.el-pagination {
  font-size: 12px;
  float: right;
}
.foot_box {
  margin-top: 20px;
  float: right;
}
.spn1,
.spn2 {
  color: skyblue;
  padding: 5px;
  cursor: pointer;
}

.el-input {
  width: 200px;
}
</style>
